import React from 'react'
import { Card, Space, Button, Checkbox, Form, Input } from 'antd';
import type { FormProps } from 'antd';
import type { RouteComponentProps } from 'react-router-dom';

type FieldType = {
  username: string;
  password?: string;
  remember?: string;
};

export default function Login(props: RouteComponentProps) {

  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    //存储token
    localStorage.setItem('token', values.username)
    //跳转
    props.history.push('/admin/shoplist')
  };

  return (
    <div>

      <Card title="管理系统" style={{ width: 400, margin: '100px auto' }}>
        <Form onFinish={onFinish}>
          <Form.Item<FieldType>
            name="username"
            rules={[{ required: true, message: '用户名不能为空' }]}
          >
            <Input placeholder='请输入用户名' />
          </Form.Item>

          <Form.Item<FieldType>
            name="password"
            rules={[{ required: true, message: '密码不能为空' }]}
          >
            <Input.Password placeholder='请输入密码' />
          </Form.Item>


          <Form.Item label={null}>
            <Button type="primary" htmlType="submit" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
